<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Random-balls</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #box {
            box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
    <div id="box">
        <canvas id="balls"></canvas>
    </div>
</body>

<script>
    window.onload = function () {
        var ballCanvas = document.getElementById('balls')
        var box = document.getElementById('box')
        var ctx = ballCanvas.getContext('2d')
        const w = ballCanvas.width = window.innerWidth * 0.8
        const h = ballCanvas.height = window.innerHeight * 0.8
        box.style.width = `${w}px`
        box.style.height = `${h}px`

        var balls = []

        for (let i = 0; i < 10; i++) {
            let ball = new Ball(ctx, w, h)
            balls.push(ball)
        }
        var timer = setInterval(() => {
            ctx.clearRect(0, 0, w, h)
            for (let i = 0; i < balls.length; i++) {
                balls[i].draw()
                balls[i].move()
            }
        }, 15)
    }

    // random numbers return [m, n]
    var rand = (m, n) => Math.floor(Math.random() * (n - m + 1) + m)

    // ball类
    class Ball {
        constructor(ctx, canvasWidth, canvasHeight) {
            // canvas ctx
            this.ctx = ctx

            //  半径
            this.r = rand(50, 100)

            // 最大位移
            this.maxWidth = canvasWidth - this.r
            this.maxHeight = canvasHeight - this.r

            // 坐标
            this.x = rand(this.r, this.maxWidth)
            this.y = rand(this.r, this.maxHeight)

            // 速度
            let speed = rand(2, 6)
            this.speedX = rand(0, 1) > 0 ? speed : -speed
            this.speedY = rand(0, 1) > 0 ? speed : -speed

            // 颜色
            this.color = `rgb(${rand(0, 255)},${rand(0, 255)},${rand(0, 255)})`
        }

        // ball绘制
        draw() {
            this.ctx.beginPath()
            this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false)
            this.ctx.fillStyle = this.color
            this.ctx.shadowColor = this.color
            this.ctx.shadowBlur = 2
            this.ctx.globalAlpha = 0.6
            this.ctx.closePath()
            this.ctx.fill()
            // this.ctx.globalCompositeOperation = 'destination-over'
        }

        // ball移动
        move() {
            this.x += this.speedX
            if (this.x >= this.maxWidth) {
                this.speedX = -this.speedX
            } else if (this.x < this.r) {
                this.speedX = -this.speedX
            }

            this.y += this.speedY
            if (this.y >= this.maxHeight) {
                this.speedY = -this.speedY
            } else if (this.y < this.r) {
                this.speedY = -this.speedY
            }
        }
    }

</script>

</html>